import React, {Component} from 'react'
import {Card, Select, Input, Button, Icon, Table,message} from 'antd'
import LinkButton from '../../components/link-button'
import {reqProducts, reqUpdateStatus} from '../../api'
import {PAGE_SIZE} from "../../utils/constants";
import './product.less'
import product from "./product";

const Option = Select.Option
/**
 *product的默认子路由组件
 */
export default class ProductHome extends Component {

    state = {
        //商品的总数量
        total: 0,
        //商品的数组
        products: [],
        //是否正在加载中
        loading: false,
        //搜索的关键字
        searchName: '',
    }

    /**
     * 初始化table列的数组
     */
    initColumns = () => {
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'productname',
            },
            {
                title: '商品描述',
                dataIndex: 'desc1',
            },
            {
                title: '价格',
                dataIndex: 'price',
                render: (price) => '￥' + price
            },
            {
                width: 100,
                title: '状态',
                //dataIndex: 'status',
                render: (product) => {
                    const {status, id} = product
                    const newStatus = status === 1 ? 2 : 1
                    return (
                        <span>
                            <Button
                                type='primary'
                                onClick={() => this.updateStatus(id, newStatus)}
                            >
                                {status === 1 ? '下架' : '上架'}
                            </Button>
                            <span>{status === 1 ? '在售' : '已下架'}</span>
                        </span>
                    )
                }
            },
            {
                width: 100,
                title: '操作',
                render: (product) => {
                    return (
                        <span>
                            {/*将product对象使用state传递给目标路由组件*/}
                            <LinkButton
                                onClick={() => this.props.history.push('/product/detail', {product})}>详情</LinkButton>
                            <LinkButton onClick={() => this.props.history.push('/product/addupdate', product)}>修改</LinkButton>
                        </span>
                    )
                }
            }
        ];
    }

    /**
     * 获取指定页码的参数
     */
    getProducts = async (pageNum) => {
        //保存pageNum,让其他方法知道
        this.pageNum = pageNum

        //显示loading
        this.setState({loading: true})
        const {searchName} = this.state
        const result = await reqProducts(pageNum, PAGE_SIZE, searchName)
        //隐藏loading
        this.setState({loading: false})
        if (result.code === 200) {
            const {total, records} = result.data
            this.setState({
                total,
                products: records
            })
        }
    }

    /**
     * 更新指定商品的状态
     */
    updateStatus = async (id, status) => {
        debugger
       const result = await reqUpdateStatus(id, status)
        console.log(result+"111111111111111")
        if(result.code === 200){
            message.success('更新商品成功')
            this.getProducts(this.pageNum)
        }
    }

    componentWillMount() {
        this.initColumns()
    }

    componentDidMount() {
        this.getProducts(1)
    }

    render() {
        //取出状态数组
        const {products, total, loading, searchName} = this.state
        console.log(total)
        const title = (
            <span>
                <Select value='1' style={{width: 150}}>
                    <Option value='1'>按名称搜索</Option>
                    <Option value='2'>按描述搜索</Option>
                </Select>
                <Input
                    placeholder='关键字'
                    style={{width: 150, margin: '0 15px'}}
                    value={searchName}
                    onChange={event => this.setState({searchName: event.target.value})}
                />
                <Button type='primary' onClick={() => this.getProducts(1)}>搜索</Button>
            </span>
        )

        const extra = (
            <Button type='primary' onClick={()=> this.props.history.push('/product/addupdate')}>
                <Icon type='plus'/>
                添加商品
            </Button>
        )

        return (
            <div>
                <Card title={title} extra={extra}>

                    <Table
                        bordered={true}
                        rowKey='id'
                        loading={loading}
                        dataSource={products}
                        columns={this.columns}
                        pagination={{
                            total: total,
                            defaultPageSize: PAGE_SIZE,
                            showQuickJumper: true,
                            onChange: this.getProducts
                        }}>
                    </Table>
                </Card>
            </div>
        )
    }
}